<template>
	<view>
		<!-- @change="$u.debounce(search, 500)" -->
		<view class="search u-flex justify-around bg-blue">
			<u-icon name="arrow-left" size="40" color="#ffffff" @click="goback"></u-icon>
			<u-search @custom="search" @search="search" v-model="msg" class="u-m-l-20"
				:input-style="{'font-size':'12px','margin-left':'20px'}" :show-action="true" :animation="true"
				:action-style="{color:'#ffffff'}" bg-color="#ffffff">
			</u-search>
		</view>
		<view class="search-result bg-white  u-p-l-15 u-p-r-15">
			<view class="searh-item u-flex justify-between u-border-bottom" @click="gotolook(item)"
				v-for="(item,index) in items" :key="index">
				<view class="item-text u-p-t-15 u-p-b-15">
					<view class="text-name text-bold u-font-lg">
						{{item.title}}
					</view>
					<view class="text-address u-font-sm test_demo text-gray u-m-t-5">
						{{item.address}}
					</view>
				</view>
				<view class="item-image" style="color: #57a2e4;">
					查看街景
				</view>
			</view>
		</view>
		<view id="renderId" :keyword="keyword" :change:keyword="renderTest.messageChanged">
		</view>
	</view>
</template>

<script>
	import {
		mymap
	} from '../../utils/mymap.js'
	export default {
		data() {
			return {
				keyword: '',
				msg: '',
				map: '',
				items: []
			}
		},
		mounted() {
			// this.$nextTick(() => {
			// 	mymap('axwAoPrgDr46Kxq4ZHB8eLfzpXhg3dsI').then((mymap) => {
			// 		var map = new BMapGL.Map("renderId")
			// 		this.map = map
			// 		//map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
			// 	});
			// });
		},
		methods: {

			gotolook(ad) {
				let that = this
				if (!that.$store.state.vuex_token) {
					that.$u.toast('请先登录')
					that.$u.debounce(() => {
						that.$goWindow('/pages/login/login')
					}, 1500)
					return
				}
				if (!that.$store.state.vuex_user.vip) {
					that.$u.toast('会员才可查看')
					that.$u.debounce(() => {
						that.$goWindow('/pages/vip/vip')
					}, 1500)
					return
				}
				console.log(ad)
				uni.navigateTo({
					url: `../showMap/showMap?title=${ad.title}&lng=${ad.point.lng}&lat=${ad.point.lat}`
				})
			},
			search(e) {
				this.keyword = e
				// let that = this
				// this.items = []
				// var options = {
				// 	onSearchComplete: function(results) {
				// 		// 判断状态是否正确
				// 		if (local.getStatus() == BMAP_STATUS_SUCCESS) {
				// 			var s = [];
				// 			for (var i = 0; i < results.getCurrentNumPois(); i++) {
				// 				s.push(results.getPoi(i));
				// 			}
				// 			that.items = s
				// 		}
				// 	}
				// };
				// var local = new BMapGL.LocalSearch(that.map, options);
				// local.search(that.keyword);
			},
			goback() {
				uni.navigateBack({
					delta: 1
				})
			},
			getMessage(options) {
				//console.log("测试renderjs调用此方法：" + JSON.stringify(options))
				this.items = options
			},
		}
	}
</script>

<style scoped lang="scss">
	.test_demo {
		text-overflow: ellipsis; //值为clip表示剪切，ellipsis时为显示省略号
		overflow: hidden;
		white-space: nowrap;
		width: 500upx;
	}

	.search {
		box-sizing: border-box;
		padding: 60upx 15upx 15upx 15upx
	}
</style>
<script module="renderTest" lang="renderjs">
	import {
		mymap
	} from '../../utils/mymap.js'
	export default {
		data() {
			return {
				map: null
			}
		},
		mounted() {
			// 引入百度地图
			this.$nextTick(() => {
				mymap('axwAoPrgDr46Kxq4ZHB8eLfzpXhg3dsI').then((mymap) => {
					var map = new BMapGL.Map("renderId")
					this.map = map
					//map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
				});
			});
		},
		methods: {
			messageChanged(newValue, oldValue, ownerVm, vm) {
				let that = this
				var options = {
					onSearchComplete: function(results) {
						// 判断状态是否正确
						if (local.getStatus() == BMAP_STATUS_SUCCESS) {
							var s = [];
							for (var i = 0; i < results.getCurrentNumPois(); i++) {
								s.push(results.getPoi(i));
							}
							ownerVm.callMethod('getMessage', s)
						}
					}
				};
				var local = new BMapGL.LocalSearch(that.map, options);
				local.search(newValue);
			}

		}
	}
</script>
<style lang="scss" scoped>
	#renderId {
		height: 0px;
		width: 100%;
	}

	.BMap_cpyCtrl {
		display: none;
	}

	.anchorBL {
		display: none;
	}
</style>
